<template>
    <view class="login-container">
        <scroll-view scroll-y class="scroll-container">
            <view class="logo-area">
                <image class="logo" src="/static/logo.png"></image>
                <!-- <text class="app-name">Walking-C</text> -->
            </view>

            <view class="form-container">
                <view class="tab-header">
                    <view :class="['tab-item', activeTab === 'login' ? 'active' : '']" @click="activeTab = 'login'">
                        账号登录
                    </view>
                    <view :class="['tab-item', activeTab === 'register' ? 'active' : '']"
                        @click="activeTab = 'register'">
                        注册
                    </view>
                </view>

                <view class="form-content">
                    <!-- 账号密码登录表单 -->
                    <view v-if="activeTab === 'login'">
                        <view class="input-group">
                            <text class="label">账号</text>
                            <input type="text" class="input" v-model="loginForm.username" placeholder="请输入账号/手机号" />
                        </view>

                        <view class="input-group">
                            <text class="label">密码</text>
                            <input type="password" class="input" v-model="loginForm.password" placeholder="请输入密码" />
                        </view>

                        <button class="submit-btn" @click="handleLogin">登录</button>
                    </view>
                    
                    <!-- 注册表单 -->
                    <view v-if="activeTab === 'register'">
                        <view class="input-group">
                            <text class="label">账号</text>
                            <input type="text" class="input" v-model="registerForm.username" placeholder="请输入账号" />
                        </view>
                        
                        <view class="input-group">
                            <text class="label">手机号</text>
                            <input type="number" class="input" v-model="registerForm.mobile" maxlength="11" placeholder="请输入手机号" />
                        </view>

                        <view class="input-group">
                            <text class="label">密码</text>
                            <input type="password" class="input" v-model="registerForm.password" placeholder="请输入密码" />
                        </view>

                        <view class="input-group">
                            <text class="label">确认密码</text>
                            <input type="password" class="input" v-model="registerForm.confirmPassword"
                                placeholder="请再次输入密码" />
                        </view>

                        <button class="submit-btn" @click="handleRegister">注册</button>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import {
    ref,
    reactive
} from 'vue';
import {
    userService
} from '../../services/userService';

// 切换标签
const activeTab = ref('login');

// 账号密码登录表单数据
const loginForm = reactive({
    username: '',
    password: ''
});

// 账号密码注册表单数据
const registerForm = reactive({
    username: '',
    mobile: '',
    password: '',
    confirmPassword: ''
});

// 处理账号密码登录
const handleLogin = () => {
    // 表单验证
    if (!loginForm.username || !loginForm.password) {
        uni.showToast({
            title: '请填写完整的登录信息',
            icon: 'none'
        });
        return;
    }

    // 根据输入判断是账号登录还是手机号登录
    const isPhoneLogin = /^1\d{10}$/.test(loginForm.username);
    
    let loginPromise;
    
    if (isPhoneLogin) {
        loginPromise = userService.phoneLogin(loginForm.username);
    } else {
        loginPromise = userService.login(loginForm.username, loginForm.password);
    }
    
    // 调用登录方法
    loginPromise
        .then(() => {
            uni.showToast({
                title: '登录成功',
                icon: 'success'
            });
            // 登录成功后跳转到首页
            setTimeout(() => {
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            }, 1500);
        })
        .catch(error => {
            uni.showToast({
                title: error || '登录失败，请检查账号密码',
                icon: 'none'
            });
        });
};

// 处理注册
const handleRegister = () => {
    // 表单验证
    if (!registerForm.username || !registerForm.mobile || !registerForm.password || !registerForm.confirmPassword) {
        uni.showToast({
            title: '请填写完整的注册信息',
            icon: 'none'
        });
        return;
    }

    if (!/^1\d{10}$/.test(registerForm.mobile)) {
        uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
        });
        return;
    }

    if (registerForm.password !== registerForm.confirmPassword) {
        uni.showToast({
            title: '两次输入的密码不一致',
            icon: 'none'
        });
        return;
    }

    // 调用注册方法
    userService.phoneRegister(registerForm.mobile, registerForm.password, registerForm.username)
        .then(() => {
            uni.showToast({
                title: '注册成功，请登录',
                icon: 'success'
            });
            // 注册成功后切换到登录页
            activeTab.value = 'login';
            // 将手机号复制到登录表单
            loginForm.username = registerForm.mobile;
            // 清空注册表单
            registerForm.username = '';
            registerForm.mobile = '';
            registerForm.password = '';
            registerForm.confirmPassword = '';
        })
        .catch(error => {
            uni.showToast({
                title: error || '注册失败，请重试',
                icon: 'none'
            });
        });
};
</script>

<style>
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    height: 100vh;
    background-color: #f8f8f8;
    box-sizing: border-box;
}

.scroll-container {
    width: 100%;
    height: 100%;
}

.logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40rpx;
    margin-bottom: 30rpx;
}

.logo {
    width: 150rpx;
    height: 150rpx;
}

.app-name {
    font-size: 36rpx;
    font-weight: bold;
    margin-top: 10rpx;
    color: #333;
}

.form-container {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
    padding: 20rpx;
    box-sizing: border-box;
}

.tab-header {
    display: flex;
    border-bottom: 1rpx solid #eee;
    margin-bottom: 20rpx;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 15rpx 0;
    font-size: 30rpx;
    color: #666;
    position: relative;
}

.tab-item.active {
    color: #007aff;
    font-weight: bold;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 4rpx;
    background-color: #007aff;
}

.input-group {
    margin-bottom: 20rpx;
}

.label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 5rpx;
    display: block;
}

.input {
    width: 100%;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    box-sizing: border-box;
}

.submit-btn {
    width: 100%;
    height: 80rpx;
    background-color: #007aff;
    color: #fff;
    border-radius: 10rpx;
    font-size: 32rpx;
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submit-btn:active {
    opacity: 0.8;
}
</style>